<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>{{title }}</h2>
      <h2>msg == {{msg }}</h2>
      <m-head></m-head>
      <h2>{{toggle?'明天早自习正常':'明天不上晚自习'}}</h2>
      <hr />
      <base-check v-model="toggle"></base-check>
      <base-text v-model="msg"></base-text>
    </div>
    <template id="check">
      <div>
        <input type="checkbox" :checked="flag" @change="change" />请选择
      </div>
    </template>
    <template id="text">
      <div>
        <input
          type="text"
          placeholder="请输入"
          :value="msg"
          @input="changemessage"
        />
      </div>
    </template>
    <script>
      const bus = new Vue();
      Vue.component("mHead", {
        template: "<header>Head - Head - wh2116daydayup</header>",
      });
      Vue.component("base-check", {
        model: {
          prop: "flag",
          event: "todochange",
        },
        props: {
          flag: Boolean, //父改子
        },
        template: "#check",
        methods: {
          change(e) {
            //自定义事件
            this.$emit("todochange", e.target.checked);
          },
        },
      });
      Vue.component("base-text", {
        template: "#text",
        props: {
          msg: String,
        },
        model: {
          prop: "msg",
          event: "aaaaaaaaa",
        },
        methods: {
          changemessage(e) {
            this.$emit("aaaaaaaaa", e.target.value);
          },
        },
      });
      const vm = new Vue({
        data: {
          title: "Vue 组件使用 v-model",
          msg: "wh2116 - daydayup",
          html: "<h2>4.1节日快乐</h2>",
          toggle: true,
        },
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;
        },
      }).$mount("#app");
    </script>
  </body>
</html>
